<template>
  <view class="bottom-nav-container">
    <view class="bottom-nav">
      <view 
        class="nav-item" 
        :class="{ active: currentPage === 'home' }"
        @click="navigateTo('home')"
      >
        <view class="icon-container">
          <image 
            :src="currentPage === 'home' ? '/static/tab/h.png' : '/static/tab/h1.png'"
            class="nav-icon"
          ></image>
        </view>
        <text class="nav-text">首页</text>
      </view>
      
      <view 
        class="nav-item" 
        :class="{ active: currentPage === 'discover' }"
        @click="navigateTo('discover')"
      >
        <view class="icon-container">
          <image 
            :src="currentPage === 'discover' ? '/static/tab/fu1.png' : '/static/tab/fu.png'"
            class="nav-icon"
          ></image>
        </view>
        <text class="nav-text">服务</text>
      </view>
      
      <view 
        class="nav-item upload-placeholder" 
        :class="{ active: currentPage === 'upload' }"
      >
        <!-- 占位元素，用于保持布局对称 -->
      </view>
      
      <view 
        class="nav-item" 
        :class="{ active: currentPage === 'messages' }"
        @click="navigateTo('messages')"
      >
        <view class="icon-container">
          <image 
            :src="currentPage === 'messages' ? '/static/tab/msg1.png' : '/static/tab/msg.png'"
            class="nav-icon"
          ></image>
          <view class="badge" v-if="messageCount > 0">{{ messageCount }}</view>
        </view>
        <text class="nav-text">消息</text>
      </view>
      
      <view 
        class="nav-item" 
        :class="{ active: currentPage === 'profile' }"
        @click="navigateTo('profile')"
      >
        <view class="icon-container">
          <image 
            :src="currentPage === 'profile' ? '/static/tab/mine1.png' : '/static/tab/mine.png'"
            class="nav-icon"
          ></image>
        </view>
        <text class="nav-text">我的</text>
      </view>
      
      <!-- 上传按钮移至容器上方，不影响底部布局 -->
      <view 
        class="upload-button" 
        @click="navigateTo('upload')"
      >
        <image src="/static/jia.png" class="upload-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "bottomNav",
  props: {
    currentPage: {
      type: String,
      default: 'home'
    },
    messageCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isAnimating: false,
      activeTab: this.currentPage
    };
  },
  watch: {
    currentPage(newVal) {
      this.activeTab = newVal;
    }
  },
  methods: {
    // 导航到其他页面
    navigateTo(page) {
      if (this.activeTab === page || this.isAnimating) return;
      
      this.isAnimating = true;
      
      // 添加点击动画效果
      const item = this.$refs[page];
      if (item) {
        item.classList.add('scale-effect');
        setTimeout(() => {
          item.classList.remove('scale-effect');
        }, 300);
      }
      
      // 处理导航逻辑
      setTimeout(() => {
        switch(page) {
          case 'home':
            this.navigate('/pages/index/index');
            break;
          case 'discover':
            this.navigate('/pages/service/service');
            break;
          case 'messages':
            this.navigate('/pages/message/message');
            break;
          case 'profile':
            this.navigate('/pages/mine/mine');
            break;
          case 'upload':
            uni.navigateTo({
              url: '/pages/post/create'
            });
            break;
        }
        
        this.activeTab = page;
        this.isAnimating = false;
        this.$emit('tabChange', page);
      }, 200);
    },
    
    // 统一处理导航逻辑
    navigate(url) {
      uni.reLaunch({
        url,
        fail: (err) => {
          console.error('导航失败:', err);
          uni.showToast({
            title: '页面加载失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  padding: 0 20rpx;
  position: relative;
  
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    
    &.active {
      .nav-text {
        color: #FF4544;
        font-weight: 500;
      }
      
      .nav-icon {
        transform: scale(1.1);
      }
    }
    
    .icon-container {
      position: relative;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .nav-icon {
      width: 48rpx;
      height: 48rpx;
      transition: all 0.2s ease;
    }
    
    .nav-text {
      margin-top: 4rpx;
      font-size: 22rpx;
      color: #999;
      transition: all 0.2s ease;
    }
    
    .badge {
      position: absolute;
      top: -6rpx;
      right: -6rpx;
      background-color: #FF4544;
      color: #fff;
      border-radius: 50%;
      width: 28rpx;
      height: 28rpx;
      font-size: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: scale(0.8);
    }
    
    &.scale-effect {
      transform: scale(0.95);
    }
    
    &.upload-placeholder {
      /* 占位元素样式 */
      pointer-events: none;
      opacity: 0;
    }
  }
  
  .upload-button {
    position: absolute;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9E9E, #FF5C8D);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(255, 69, 68, 0.3);
    transition: all 0.3s ease;
    z-index: 101;
    
    &:hover {
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 6rpx 20rpx rgba(255, 69, 68, 0.4);
    }
    
    &:active {
      transform: translateX(-50%) scale(0.95);
    }
  }
  
  .upload-icon {
    width: 48rpx;
    height: 48rpx;
  }
}

// 添加动画效果
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8rpx); }
}

.bounce-effect {
  animation: bounce 0.5s ease;
}
</style>